<template>
	<view>
			<view class="padding-sm">
				<swiper style="height: 520rpx;">
					<swiper-item v-for="(item,index) in user.userImages" :key="item.id">
						<u-image width="710upx" height="520upx" style="display: inline-block;margin-right: 6upx;"
							:src="item">
						</u-image>
						<!-- <image :src = "item"></image> -->
					</swiper-item>
				</swiper>

				<view class="margin-top-sm padding flex justify-between bg">
					<!-- 头像 -->
					<u-image :src="user.avr" width="100upx" height="100upx" mode="" @click="imgPreview(0)">
					</u-image>
					<view class="flex-sub margin-left text-white flex flex-direction justify-between">
						<view class="flex justify-between">
							<view>
								<!-- 昵称 -->
								<view class="margin-right-xs" style="display: inline-block;">
									<text>{{user.nick}}</text>
								</view>
								<!-- 性别 -->
								<view class="round" v-if="user.gender=='女'"
									style="display: inline-block;background-color: #582D4D; color: #FF659A;padding: 2upx 8upx;">
									<u-icon name="woman" color="#FF659A" size="24"></u-icon>
								</view>
								<view class="round" v-if="user.gender=='男'"
									style="display: inline-block;background-color: #4b56f1; color: #69a5ff;padding: 2upx 8upx;">
									<u-icon name="man" color="#69a5ff" size="24"></u-icon>
								</view>
								<view style="position: absolute;margin-top: -40rpx;margin-left: 430rpx;">
									<view v-if="isCareUser" style="text-align: center;" @click="cancelCare">
										<uni-icons type="heart-filled" color="#ff4a4d" size="30"
											style="margin: 0;padding: 0;"></uni-icons>
										<view style="font-size: 22upx;width: 100upx;">已关注</view>
									</view>
									<!-- 未关注 -->
									<view v-else style="text-align: center;" @click="careUser">
										<uni-icons type="heart" color="#e5e5e5" size="30" style="margin: 0;padding: 0;">
										</uni-icons>
										<view style="font-size: 22upx;width: 80upx;">关注</view>
									</view>
								</view>
								<view class="margin-right-xs margin-top-xs uniui-color"
									style="font-size: 10rpx;color: silver;">
									<view class="round margin-left-xs u-font-12" v-if="user.authPw=='n'"
										style="display: inline-block;background-color: #37394E; color: #FFFFFF;padding: 2upx 16upx;font-weight: 400;">
										平平无奇的用户
									</view>
									<view class="round margin-left-xs u-font-12" v-if="user.authPw=='y'"
										style="display: inline-block;background-color: #37394E; color: #FFFFFF;padding: 2upx 16upx;font-weight: 400;">
										金牌陪玩
									</view>
									<view class="round margin-left-xs u-font-12" v-if="user.authPw=='c'"
										style="display: inline-block;background-color: #37394E; color: #FFFFFF;padding: 2upx 16upx;font-weight: 400;">
										即将成为金牌陪玩
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
				<view class="margin-top-sm padding bg">
					<view class="usermain-item item-padding">
						<view style="color: #FFFFFF;">粉丝数</view>
					</view>
					<view class="flex margin-top-sm">
						<view style="color: #B8B8CC;">{{fansNum}} 人</view>
					</view>
				</view>
				<view class="margin-top-sm padding bg">
					<view class="usermain-item item-padding">
						<view style="color: #FFFFFF;">生日</view>
					</view>
					<view class="flex margin-top-sm">
						<view style="color: #B8B8CC;">{{user.birthday}}</view>
					</view>
				</view>
				<view class="margin-top-sm padding bg">
					<view class="usermain-item item-padding">
						<view style="color: #FFFFFF;">注册时间</view>
					</view>
					<view class="flex margin-top-sm">
						<view style="color: #B8B8CC;">{{user.regTime}}</view>
					</view>
				</view>
				<view class="margin-top-sm padding bg">
					<view class="usermain-item item-padding">
						<view style="color: #FFFFFF;">个性签名</view>
					</view>
					<view class="flex margin-top-sm">
						<view style="color: #B8B8CC;">{{user.signature}}</view>
					</view>
				</view>
			</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					width: '400upx',
					color: '#FFFFFF',
					background: "#2087fe",
					border: 0
				},
				user: {

				},
				userId: 0,
				loginUserId: 0,
				urls: [],
				isCareUser: false,
				fansNum: 0,
			}
		},
		onLoad(opition) {
			this.userId = opition.id;
			this.loginUserId = uni.getStorageSync('userId');
			this.getData();
			this.getIsCareUser();
			this.getFans();
		},
		methods: {
			getData() {
				this.$myRequest({
					url: "/user/byId",
					method: "get",
					data: {
						"id": this.userId
					}
				}).then(r => {
					console.log(r)
					if (r.data.code == "200") {
						this.user = r.data.data;
						this.urls.push(this.user.avr);
					} else {
						uni.showToast({
							title: "系统繁忙",
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'fail',
							//显示持续时间为 2秒
							duration: 2000
						})
					}
					console.log(this.user);
				})
			},
			imgPreview(index) {
				console.log("查看大图")
				uni.previewImage({
					urls: this.urls,
					current: index, // 当前显示图片的http链接，默认是第一个
				})
			},
			getIsCareUser() {
				this.$myRequest({
					url: '/user/careUser/' + this.loginUserId + "/" + this.userId,
				}).then(r => {
					console.log(r)
					if (r.data.code == 200) {
						this.isCareUser = r.data.data
					}
				})
			},
			getFans() {
				this.$myRequest({
					url: '/user/getFansCount/' + this.userId,
				}).then(r => {
					console.log(r)
					if (r.data.code == 200) {
						this.fansNum = r.data.data
					}
				})
			},
			// 关注
			careUser(moment) {
				if (this.loginUserId == this.userId) {
					uni.showToast({
						title: '不能关注自己',
						icon: "none"
					})
					return;
				}

				this.$myRequest({
					url: '/user/careSomebody/' + this.loginUserId + '/' + this.userId
				}).then(r => {
					if (r.data.code == 200) {
						this.isCareUser = true;
						uni.showToast({
							title: '关注成功',
							icon: "none"
						})
					}
				})
			},
			// 取关
			cancelCare(moment) {
				this.$myRequest({
					url: '/user/cancelCare/' + this.loginUserId + '/' + this.userId
				}).then(r => {
					this.isCareUser = false;
					if (r.data.code == 200) {
						uni.showToast({
							title: '取关成功',
							icon: "none"
						})
					}
				})
			},
		}
	}
</script>

<style>
</style>
